<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="movie.css" />
    <title>Document</title>
</head>

<body>
    <div id="app">
        <div class="select">
            <h1>电影类型：</h1>
            <ul class="type-list">
                <h2 id="comedy">喜剧</h2>
                <h2 id="animation">动画</h2>
            </ul>
            <div id="welcome">ጿxxx</div>
        </div>
    </div>
    <script src="jquery-3.7.1.min.js"></script>
    <script>
        $(document).ready(function () {
            // 初始化数据
            getData();
            $("#comedy").addClass("selected")
            var userInfo = JSON.parse(sessionStorage.getItem("userInfo"))
            if (userInfo) {
                $("#welcome").text("ጿ" + userInfo.username)
            }

            // 初始化事件绑定
            $('#comedy').click(function () {
                showMovieType('comedy');
                // var userInfo = JSON.parse(sessionStorage.getItem("userInfo"))
                // if (userInfo) {
                //     $("#welcome").text("ጿ" + userInfo.username)
                // }
            });

            $('#animation').click(function () {
                showMovieType('animation');
                // var userInfo = JSON.parse(sessionStorage.getItem("userInfo"))
                // if (userInfo) {
                //     $("#welcome").text("ጿ" + userInfo.username)
                // }
            });

            // 显示特定类型的电影
            function showMovieType(type) {
                $("#app").empty();
                $("#app").append('<div class="select"><h1>电影类型：</h1><ul class="type-list"><h2 id="comedy">喜剧</h2><h2 id="animation">动画</h2></ul><div id="welcome">ጿxxx</div></div>');

                // 重新绑定事件
                $('#comedy').off('click').click(function () {
                    showMovieType('comedy');
                });

                $('#animation').off('click').click(function () {
                    showMovieType('animation');
                });

                // 根据类型获取数据
                if (type === 'comedy') {
                    getData();
                    var userInfo = JSON.parse(sessionStorage.getItem("userInfo"))
                    if (userInfo) {
                        $("#welcome").text("ጿ" + userInfo.username)
                    }
                    $("#comedy").addClass("selected");
                    $("#animation").removeClass("selected");
                } else if (type === 'animation') {
                    changeData();
                    var userInfo = JSON.parse(sessionStorage.getItem("userInfo"))
                    if (userInfo) {
                        $("#welcome").text("ጿ" + userInfo.username)
                    }
                    $("#animation").addClass("selected");
                    $("#comedy").removeClass("selected");
                }
            }
        });
        function getData() {
            $.ajax({
                url: 'https://mock.presstime.cn/mock/663dc446d59f9a21eb4d69d2/movieapi/getMovies',
                type: "GET",
                data: { type: 1 },
                success: function (data) {
                    console.log(data);
                    showMOvie(data)
                },
                error: function (XHR, Status, error) {
                    console.log(error);
                }
            });
        }
        function changeData() {
            $.ajax({
                url: 'https://mock.presstime.cn/mock/663dc446d59f9a21eb4d69d2/movieapi/getMovies',
                type: "GET",
                data: { type: 2 },
                success: function (data) {
                    console.log(data);
                    showMOvie(data)
                },
                error: function (XHR, Status, error) {
                    console.log(error);
                }
            });
        }
        function showMOvie(movie) {
            var movies = movie.data
            // $("#app").empty();
            // $('#app').append('<div class="select"><h1>电影类型：</h1><ul class="type-list"><h2 id="comedy">喜剧</h2><h2 id="animation">动画</h2></ul></div>');
            for (let i = 0; i < movies.length; i++) {
                let starHtml = '';
                if (movies[i].rating && movies[i].rating.length == 2) {
                    const score = parseFloat(movies[i].rating[0]);
                    const stars = Math.round(score / 2);
                    for (let i = 0; i < 5; i++) {
                        if (i < stars) {
                            starHtml += '<span class="star">&#9733;</span>';
                        } else {
                            starHtml += '<span class="star">&#9734;</span>'; // 空星
                        }
                    }
                    starHtml += `<span>${score}</span>`;
                }
                eleDOM = $(`
                <div class="movies">
                    <a href="${movies[i].url}" target="_blank">
                        <img src="${movies[i].cover_url}" >
                    </a>
                    <div class=movies-right>
                        <p><span class="movies-title">${movies[i].title}</span>
                            ${movies[i].is_playable ? '<span class="movies-open">[可播放]</span>' : ''}
                            <span class="movies-num">${movies[i].rank}</span>
                        </p>
                        <p class="movies-actor">${movies[i].actors.join(' / ')}</p>
                        <p><span>${movies[i].release_date.split('-')[0]}</span> /
                            <span>${movies[i].regions}</span>
                            <span>${movies[i].types.join('/')}</span>
                        </p>
                        <p class="movies-score">
                            <span class="movies-rating">${starHtml}</span>
                            <span>${movies[i].vote_count}评价</span>
                        </p>
                    </div>
                </div>
                `)
                $("#app").append(eleDOM)
            }
        }
    </script>
</body>

</html>